<template>
  <!-- 水厂 -->
  <div class="pop-upSc">
    <div class="img_up">
      <div class="pop_name">{{ data.name }}</div>
        <!-- <div v-for="(item,key) in dataStore" :key="key">
          <div v-if="item.deptName==data.name" class="pop_value">
              {{ item.pointName }}： {{ item.v }}
          </div>
      </div> -->
      <div v-for="(item,key) in dataArr" :key="key" class="pop_value">
        {{ item.aTitle }}： {{ item.aValue?item.aValue:'--'+item.aUnit }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps,ref } from 'vue';
import bus from '../../tools/eventBus'
import {water_factory_data} from '../../components/List/水厂点位list'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})  // 给 data 一个默认的空对象
  },
  position: Object
});




// 数据存储用的对象
const dataStore =ref({});
// 获取key值
const deptName=ref('')

const WaterData=ref([])
// list列表
const dataArr=ref({})

/*
  民丰水厂：水质，流量，压力-8个指标
*/ 


// 初始化加载list列表
propsArr()
function propsArr(){
 
  const a= props.data.monititems.split(',')
  const filterArr=['出厂浊度','出水压力','出厂pH','出厂二氧化氯','胜华北1020瞬流','胜华南529瞬流','胜华南529流量','瞬流3','瞬流1','瞬流2','出厂瞬流(DN1200)','一期出厂浊度','东八路1020瞬时','一期出厂pH','一期出厂余氯',
    '一期出厂压力','一期出厂瞬流','管网水质浊度','管网水质PH','电厂820瞬时','电厂720瞬时','西小区720瞬时','西五区720瞬时'
    ,'石化500瞬流','纯梁377瞬流','纯梁377瞬流','新北线瞬时','测井720瞬时'
  ]
  const b = a.filter((item) => {
    if (filterArr.includes(item.split(':')[1])) {
     return item.split(':')[0];
    }
  });

  b.forEach((item)=>{

    const Bq=item.split(':')[0]
    const BqValue=item.split(':')[1]
   const BqValue1= BqValue.replace(/出厂|出水/g, '');
  //  const BqValue1= BqValue.replace('出水', '');
    const archiveid=props.data.archiveid
    let propsId=''  
    if (archiveid.includes("HD72_") || archiveid.includes("HD76_")) {
      propsId = archiveid.replace(/HD72_|HD76_/g, ''); 
    } else {
      propsId=archiveid
    }

    const key = `${propsId}_${Bq}`;
      // 如果 dataArr.value 中已经存在该键，则覆盖，没有这添加键值对
      if (dataArr.value[key]) {
        dataArr.value[key] = {aTitle:BqValue1,aUnit:processUnit1(BqValue1)};
      } else {
        dataArr.value[key] = {aTitle:BqValue1,aUnit:processUnit1(BqValue1)};
      }
  })

  // console.log('dataArr.value',dataArr.value);
  
}


// 创建一个函数来格式化数字并添加单位
function ensureUnit(value, unit) {
    if (typeof value === 'number') {
        return `${value}${unit}`;
    } else if (typeof value === 'string') {
        // 检查是否已经包含单位
        if (!value.endsWith(unit)) {
            return `${value}${unit}`;
        }
        return value;
    }
    return value;  // 如果不是数字或字符串，直接返回原值
}

// 流量压力水质实时数据
bus.on('realTime', (data) => {
  if (data.deptName.slice(2, 4) == '水厂' && data.target!=='日供水量') {
    // 调用处理函数
    // console.log(data.target,'data.target');
    SsData(data)
    // processData(data);

  }
})


// 实时数据对应list列表--dataArr.value
function SsData(SsData){
  SsData.v=JieQu(SsData.v)


  processUnit(SsData) // 添加单位
  const SsDataKey = `${SsData.sn}_${SsData.pointId}`;
  for (let key1 in dataArr.value) {
    if (dataArr.value.hasOwnProperty(key1)) {
        if(key1==SsDataKey) dataArr.value[key1]={...dataArr.value[key1],aValue:SsData.v}
         }
       }
}

// 添加单位
function processUnit(data){
  let valueTarget=''
  if(data.target!=='二氧化氯') valueTarget=data.target.slice(-2)
  switch(valueTarget){
    case '浊度':
    data.v=ensureUnit(data.v,'NTU')
    break;
    case '化氯':
    data.v=ensureUnit(data.v,'mg/L')
    break;
    case '流量':
    case '瞬时':
    case '顺流':
    data.v=ensureUnit(data.v,'m³/h') 
    break;
    case '压力':
    data.v=ensureUnit(data.v,'MPa') 
    break;
     default:
    return ''
  }
}

// 值为空时附上单位
function processUnit1(data){
 const data1=data.slice(-2)
  switch(data1){
    case '浊度':
    return 'NTU'
    break;
    case '化氯':
    case '余氯':
    return 'mg/L'
    break;
    case '流量':
    case '瞬时':
    case '瞬流':
    case '流1':
    case '流2':
    case '流3':
    return 'm³/h'
    break;
    case '压力':
    return 'MPa'
    break;
  default:
    return ''
  }
}

// 截取数据
function JieQu(value){
  if (typeof value === 'number') {
  var result = value.toFixed(2); // 正常处理数值
  return result
} else if (!isNaN(parseFloat(value))) { // 如果是数字字符串
  var result = parseFloat(value).toFixed(2); // 转换成数字并处理
  return result
} else {
  // console.log('value 不是一个有效的数字:', value); // 处理错误情况
}
}

// 处理数据的函数
function processData(data) {

  data.v=JieQu(data.v)

  switch(data.target.slice(-2)){
    case '浊度':
    data.v=ensureUnit(data.v,'NTU')
    break;
    case '化氯':
    data.v=ensureUnit(data.v,'mg/L')
    break;
    case '流量':
    data.v=ensureUnit(data.v,'m³/h') 
    break;
    case '压力':
    data.v=ensureUnit(data.v,'MPa') 
    break;
  }

  data.pointName=data.pointName.replace(/瞬时流量/g, "瞬流");
  data.pointName=data.pointName.replace(/出厂水/g, "");

  // data.v=data.v.toFixed(3);

    const key = `${data.pointId}_${data.sn}`;

    

    // 如果 dataStore 中已经存在该键，则覆盖
    if (dataStore.value[key]) {
        // console.log(`需要覆盖`,data);
        dataStore.value[key] = data;
    } else {
        // console.log(`添加该值`,data);
        dataStore.value[key] = data;
    }

    if(key=='A1_155' || key=='A1_348'){
      dataStore.value[key].pointName ='浊度'
      if(dataStore.value[key].v.includes('mg/L')){
       const Dw= dataStore.value[key].v.slice(0, -4);
       dataStore.value[key].v=Dw+'NTU'
      }
    }

   
    
}




</script>

<style scoped lang="scss">
.pop-upSc {
  position: absolute;
  padding: 19px 8px 16px 17px;
  border-radius: 10px;
  bottom: 15px;
  left: -111px;
  font-size: 10px;
  background-image: url('/public/icon/气泡背景@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 220px; /* 设定一个合理的最小宽度 */
  height: 168px; /* 设定一个合理的最小高度 */
  display: flex;
  // flex-direction: column;
  // justify-content: center;
  // 滚动条
}

// .pop-upSc {
//       position: absolute;
//       /* background-color: white; */
//       /* box-shadow: 0 1px 4px rgba(0,0,0,0.2); */
//       padding: 15px 6px 10px 16px;
//       border-radius: 10px;
//       /* border: 1px solid #cccccc; */
//       bottom: 25px;
//       left: -75px;
//       min-width: 160px;
//       font-size: 10px;
//       background-color: #fff;
//       // background-image: url('/public/icon/气泡背景@3x.png');
//     //   background-size: cover; /* 使背景图片覆盖整个元素 */
//     // background-position: center; /* 使背景图片居中 */
//     // background-repeat: no-repeat; /* 避免背景图片重复 */
// }

// .pop-upSc:after, .pop-upSc:before {
//       top: 100%;
//       border: solid transparent;
//       content: " ";
//       height: 0;
//       width: 0;
//       position: absolute;
//       pointer-events: none;
// }
// .pop-upSc:after {
//       border-top-color: white;
//       border-width: 10px;
//       left: 72px;
//       margin-left: -10px;
// }
// .pop-upSc:before {
//       border-top-color: #cccccc;
//       border-width: 11px;
//       left: 72px;
//       margin-left: -11px;
// }


    .img_up{
      overflow-y: auto;
    }

    .pop_name{
       font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #1A3352;
      font-weight: 500;
      width: 186px;
    }
    .pop_value{
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #747B8B;
      line-height: 20px;
      font-weight: 400;
    }

    ::-webkit-scrollbar {
  width: 6px; /* 垂直滚动条的宽度 */
  height: 12px; /* 水平滚动条的高度 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景色 */
  border-radius: 10px; /* 滚动条轨道的圆角 */
}

/* 滚动条滑块（手柄） */
::-webkit-scrollbar-thumb {
  background: #c2ddfd; /* 滚动条滑块的背景色 */
  border-radius: 10px; /* 滚动条滑块的圆角 */
}

/* 滚动条滑块悬停 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条滑块悬停时的背景色 */
}

// .pop-upSc:after, .pop-upSc:before {
//       top: 100%;
//       border: solid transparent;
//       content: " ";
//       height: 0;
//       width: 0;
//       position: absolute;
//       pointer-events: none;
// }
// .pop-upSc:after {
//       border-top-color: white;
//       border-width: 10px;
//       left: 48px;
//       margin-left: -10px;
// }
// .pop-upSc:before {
//       border-top-color: #cccccc;
//       border-width: 11px;
//       left: 48px;
//       margin-left: -11px;
// }
</style>